/* Copyright (c) 2024 Huawei Technologies Co., Ltd.
openFuyao is licensed under Mulan PSL v2.
You can use this software according to the terms and conditions of the Mulan PSL v2.
You may obtain a copy of Mulan PSL v2 at:
         http://license.coscl.org.cn/MulanPSL2
THIS SOFTWARE IS PROVIDED ON AN 'AS IS' BASIS, WITHOUT WARRANTIES OF ANY KIND,
EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
See the Mulan PSL v2 for more details. */
import BreadCrumbCom from '../../components/BreadCrumbCom';
import ColocationDeleteModal from '../../components/ColocationDeleteModal';
import { containerRouterPrefix, ResponseCode } from '../../common/constants';
import { useParams, Link, useHistory } from 'inula-router';
import { useEffect, useState, useCallback } from 'openinula';
import { SyncOutlined, MoreOutlined, DownOutlined, CloseOutlined } from '@ant-design/icons';
import { Form, Table, ConfigProvider, Space, Input, Button, message, Popover } from 'antd';
import zhCN from 'antd/es/locale/zh_CN';
import { getColocationRulesListData, deleteColocationRule } from '../../api/colocationApi';
import '../../styles/colocationRuleManagementPage.less';
import { sorterFirstAlphabe, sortJobByTime } from '../../tools/utils';
import { filterStatusName, reseverStatusName } from '../../utils/common';
import Dayjs from 'dayjs';
import ToolTipComponent from '@/components/ToolTipComponent';

/**
 * 
 * @param type 类型
 * @returns 
 */
export default function ColocationRulesManagementPage({ type }) {
  const [isShow, setIsShow] = useState(true);
  const param = useParams();
  const history = useHistory();
  const [colocationRuleForm] = Form.useForm();
  const [messageApi, contextHolder] = message.useMessage();
  const [popOpen, setPopOpen] = useState('');
  const [creatPopOpen, setCreatPopOpen] = useState(false); // 气泡悬浮
  // table部分
  const [originalList, setOriginalList] = useState([]); // 原始数据
  const [colocationRuleLoading, setColocationRuleLoading] = useState(false);
  const [colocationRuleList, setColocationRuleList] = useState([]); // 工作负载table数据集
  const [colocationRulePage, setColocationRulePage] = useState(1);
  const [filterRuleStatus, setFilterRuleStatus] = useState([{ text: '在线', value: '在线' }, { text: '离线', value: '离线' }]); // 规则混部混部赋值筛选项
  const [filterRuleValue, setFilterRuleValue] = useState(); // 筛选值

  // 删除提醒弹窗
  const [deleteModal, setDeleteModal] = useState(false);
  const [deleteName, setDeleteName] = useState('');

  // 列表项
  const ruleColumns = [
    {
      title: '规则名称',
      key: 'rule_name',
      dataIndex: 'name',
      width: 300,
      sorter: (a, b) => sorterFirstAlphabe(a.ruleName, b.ruleName),
      render: (_, record) => <Space>
        <div style={{ color: '#3f66f5', cursor: 'pointer' }} onClick={() => handleOptRule(record, 'look')}>{record.ruleName}</div>
      </Space>,
    },
    {
      title: '匹配规则数量',
      key: 'rule_attribute',
      width: 200,
      sorter: (a, b) => sorterFirstAlphabe(a.selectors.length, b.selectors.length),
      render: (_, record) => <Space>
        <div>{record.selectors.length}</div>
      </Space>,
    },
    {
      title: '创建时间',
      key: 'rule_time',
      width: 200,
      sorter: (a, b) => sortJobByTime(a, b),
      render: (_, record) => <Space>
        {Dayjs(record.creationTimestamp ? record.creationTimestamp : 'none').format('YYYY-MM-DD HH:mm')}
      </Space>,
    },
    {
      title: '操作',
      key: 'rule_handle',
      width: 100,
      render: (_, record) => (
        <Space>
          <Popover placement="bottom"
            content={
              <div className="colocation_rules_col_popver">
                <Button type="link" onClick={() => handleOptRule(record, 'update')}>修改</Button>
                <Button type="link" onClick={() => handleDeleteRule(record)}>删除</Button>
              </div>
            }
            trigger="click"
            open={popOpen === `${record.ruleName}`}
            onOpenChange={newOpen => newOpen ? setPopOpen(`${record.ruleName}`) : setPopOpen('')}>
            <MoreOutlined className="common_antd_icon primary_color" />
          </Popover>
        </Space>
      ),
    },
  ];

  const handleRolePopOpenChange = (open) => {
    setCreatPopOpen(open);
  };

  const handleRulesShowChange = () => {
    setIsShow(false);
  };

  // 获取colocationRuleList
  const getColocationRuleList = useCallback(async (isChange = true) => {
    setColocationRuleLoading(true);
    try {
      const res = await getColocationRulesListData();
      if (res.status === ResponseCode.OK) {
        // 此处先过滤在线属性再进行key遍历
        const typeArr = res.data?.data?.filter(item => {
          return item.colocationType === type;
        });
        const arr = typeArr.map((item, index) => {
          return {
            ...item,
            key: index,
          };
        });
        setOriginalList(arr);
        handleSearchColocationRule(arr, isChange); // 先搜索
      } else {
        messageApi.error('接口异常');
      }
    } catch (e) {
      setColocationRuleList([]); // 数组为空
    }
    setColocationRuleLoading(false);
  }, []);

  // 外部检索
  const handleSearchColocationRule = (totalData = originalList, isChange = true) => {
    const colocationRuleFormName = colocationRuleForm.getFieldValue('colocationRule_name');
    let temporyList = totalData;
    if (colocationRuleFormName) {
      temporyList = temporyList.filter(item => (item.ruleName).includes(colocationRuleFormName));
    }
    setColocationRuleList([...temporyList]);
    isChange ? setColocationRulePage(1) : null;
  };

  // 混部节点移除
  const handleDeleteRule = (record) => {
    setPopOpen('');
    setDeleteModal(true);
    setDeleteName(record.ruleName);
  };

  // 修改
  const handleOptRule = async (record, opt) => {
    setPopOpen('');
    if (opt === 'update') {
      if (record.selectors[0].name !== '' && record.selectors[0].selector === null) {
        history.push({
          pathname: `/ColocationRulesManagement/detail/${record.ruleName}/${'exact'}`,
          state: { detail: originalList.filter(item => item.ruleName === record.ruleName) },
        });
      } else if (record.selectors[0].name === '' && record.selectors[0].selector !== null) {
        history.push({
          pathname: `/ColocationRulesManagement/detail/${record.ruleName}/${'label'}`,
          state: { detail: originalList.filter(item => item.ruleName === record.ruleName) },
        });
      } else {
        messageApi.error('类型不一致无法修改');
      }
    } else {
      if (record.selectors[0].name !== '' && record.selectors[0].selector === null) {
        history.push({
          pathname: `/ColocationRulesManagement/detail/${record.ruleName}/${'exact'}/${'onlyRead'}`,
          state: { detail: originalList.filter(item => item.ruleName === record.ruleName) },
        });
      } else if (record.selectors[0].name === '' && record.selectors[0].selector !== null) {
        history.push({
          pathname: `/ColocationRulesManagement/detail/${record.ruleName}/${'label'}/${'onlyRead'}`,
          state: { detail: originalList.filter(item => item.ruleName === record.ruleName) },
        });
      } else {
        messageApi.error('类型不一致无法查看');
      }
    }
  };

  const handleTableChange = useCallback(
    (
      _pagination,
      filter,
      _sorter,
      extra
    ) => {
      if (extra.action === 'filter') {
        setFilterRuleValue(filter.rule_attribute);
      }
    },
    []
  );

  // 重置按钮
  const handleColocationRuleReset = () => {
    getColocationRuleList();
  };

  // 创建入口
  const handleColocationRuleCreate = (createWay, createType) => {
    if (colocationRuleList.length < 100) {
      if (createWay === 'label') {
        history.push(`/ColocationRulesManagement/create/lable/${createType}`);
      } else {
        history.push(`/ColocationRulesManagement/create/exact/${createType}`);
      }
    } else {
      messageApi.error('规则条数限制为100条');
    }
  };

  // 删除确定
  const handleDeleteConfirmBack = async () => {
    // 此处接口
    try {
      const res = await deleteColocationRule(deleteName);
      if (res.status === ResponseCode.OK) {
        messageApi.success('删除成功');
        setTimeout(() => {
          getColocationRuleList();
        }, 1000);
      } else {
        messageApi.error('删除失败');
      }
    } catch (e) {
      messageApi.error('接口异常');
    }
    setDeleteModal(false);
  };

  // 删除取消
  const handleDeleteCancel = () => {
    setDeleteModal(false);
  };

  useEffect(() => {
    getColocationRuleList();
  }, [getColocationRuleList]);

  return <div className="child_content">
    <div className='rules_detail_content'>
      {contextHolder}
      <div className={`${isShow ? '' : 'cant_show'}`}>
        <ToolTipComponent>
          <div className="statefulSetDetail" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div className='promot-box'>设置规则后，下发满足匹配规则的工作负载会自动带有相关混部属性的标识。</div>
            <CloseOutlined onClick={handleRulesShowChange} />
          </div>
        </ToolTipComponent>
      </div>
      <div className={` ${isShow ? 'rules_detail_content_box' : 'normal_rules_detail_content_box'}`}>
        <div className='rules_detail_form'>
          <Form className="rules-searchForm form_padding_bottom" form={colocationRuleForm}>
            <Form.Item name="colocationRule_name" className="rules-search-input">
              <Input.Search placeholder="搜索规则名称" onSearch={() => handleSearchColocationRule()} autoComplete="off" maxLength={53} />
            </Form.Item>
            <Form.Item>
              <Space>
                <Popover placement='bottom'
                  content={
                    <Space className='colocation_rules_col_popver'>
                      <Button type="link" onClick={() => handleColocationRuleCreate('label', type)}>标签选择器模式</Button>
                      <Button type="link" onClick={() => handleColocationRuleCreate('exact', type)}>精确匹配模式</Button>
                    </Space>
                  }
                  open={creatPopOpen}
                  onOpenChange={handleRolePopOpenChange}>
                  <Button className="rules_detail_form_button">创建<DownOutlined className='small_margin_adjust' /></Button>
                </Popover>
                <Button icon={<SyncOutlined />} onClick={handleColocationRuleReset} className="reset_btn" style={{ marginLeft: '16px' }}></Button>
              </Space>
            </Form.Item>
          </Form>
        </div>
        <div className='rules_detail_content_table'>
          <ConfigProvider locale={zhCN}>
            <Table
              loading={colocationRuleLoading}
              columns={ruleColumns}
              dataSource={colocationRuleList}
              onChange={handleTableChange}
              pagination={{
                className: 'colocation-website-page',
                current: colocationRulePage,
                showTotal: (total) => `共${total}条`,
                showSizeChanger: true,
                showQuickJumper: true,
                pageSizeOptions: [10, 20, 50],
                onChange: (page) => setColocationRulePage(page),
              }}
              expandable={{
                expandedRowRender: (record) => (
                  <div style={{ marginLeft: '120px', display: 'flex', flexDirection: 'column' }}>
                    <p style={{ color: '#CCC', marginBottom: '8px' }}>匹配规则:</p>
                    {record.selectors.map(item => {
                      return <div style={{ display: 'flex', marginBottom: '6px' }}>
                        <p style={{ background: '#cfe7ff', borderRadius: '6px', padding: '2px 12px', marginRight: '8px', color: '#333' }}>namespace={item.namespace ? item.namespace : '--'}</p>
                        <p style={{ background: '#cfe7ff', borderRadius: '6px', padding: '2px 12px', marginRight: '8px', color: '#333' }}>workload={item.workLoadTypes[0] ? item.workLoadTypes[0] : '--'}</p>
                        {item.name ? <p style={{ background: '#cfe7ff', borderRadius: '6px', padding: '2px 12px', marginRight: '8px', color: '#333' }}>name={item.name}</p> : <></>}
                        {item.selector?.matchExpressions.map(innerSelect => {
                          return <p style={{ background: '#cfe7ff', borderRadius: '6px', padding: '2px 12px', marginRight: '8px', color: '#333' }}>{innerSelect.key}={innerSelect.values.join(',')}</p>;
                        })}
                      </div>;
                    })}
                  </div>
                ),
              }}
            >
            </Table>
          </ConfigProvider>
        </div>
      </div>
      <ColocationDeleteModal
        title="删除混部规则"
        open={deleteModal}
        cancelFn={handleDeleteCancel}
        content={[
          `确定将规则名称为 ${deleteName} 删除吗？`,
        ]}
        confirmFn={handleDeleteConfirmBack}
        leftText='删除'
      />
    </div>
  </div>;
}